<template>
    <el-form
      ref="smsLoginForm"
      :model="smsFormData"
      status-icon
      :rules="smsRules"
      label-width="120px"
      class="demo-smsFormData"
    >
    <!-- 输入手机号 -->
    <el-form-item label="手机号" prop="phone" class="captcha-form-item">
        <el-input v-model="smsFormData.phone" maxlength="11" />
        <div class="yzm">点击发送</div>
      </el-form-item>
      <!-- 输入验证码 -->
      <el-form-item label="验证码" prop="code" class="password-form-item">
        <el-input v-model="smsFormData.code" type="text" autocomplete="off" maxlength="5"/>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="submitForm(smsLoginForm)">提交</el-button>
      </el-form-item>
    </el-form>
</template>
<script setup>

//业务：

// 1.修改表单注入的数据以及prop

// 2.给smsLogin这个组件添加自己的表单Form校验规则

  import { reactive, ref } from 'vue'
  //引入校验函数
  import {smsRules,useSubmitForm} from "../../composition/login/validate"

  //表单校验成功之后，回调的方法
  let validateSuccess = () => {
    console.log("校验成功")
}

  //表单校验成功之后，回调的方法
  let validateFailed = () => {
    console.log("校验失败")
  }

  //使用submitForm

  let submitForm = useSubmitForm(validateSuccess,validateFailed)

  const smsLoginForm = ref()

  //注入到表单的数据

  const smsFormData = reactive({
    phone: '',
    code: '',
  })
  
  
  
  </script>